<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-05-11 11:40:24
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-06-28 17:45:50
 * @FilePath: \ant-design-vue-jeecg-master\src\views\communicationFile\management.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="名称">
              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
              <j-input placeholder="输入名称模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="鉴权类型">
              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
              <j-input placeholder="输入鉴权类型模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="时间">
              <a-date-picker @change="onChange" v-model="queryParam.startTime" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="authenticationType" slot-scope="text">
        <span style="cursor: pointer">{{ text == 0 ? '用户鉴权' : '控星指令鉴权' }}</span>
      </template>
      <template slot="authenticationResults" slot-scope="text">
        <span :class="text == 0 ? 'errorColor' : ''">{{ text == 0 ? '失败' : '成功' }}</span>
      </template>
      <span slot="action" slot-scope="text, record">
        <a-button @click="handleInfo(record)">详情</a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  mixins: [JeecgListMixin],
  data() {
    const data = [
      {
        key: '1',
        No: 1,
        Name: '指控车3',
        authenticationType: 0,
        authenticationResults: 1,
        time: '2023-05-05 12:32:28',
        applicationTime: '2023-05-05 12:31:28',
        sendCode: '571F',
        localCode: '678E',
      },
      {
        key: '2',
        No: 1,
        Name: '指控车1',
        authenticationType: 1,
        authenticationResults: 1,
        time: '2023-05-01 16:32:28',
        applicationTime: '2023-05-01 12:31:28',
        sendCode: '571F',
        localCode: '678E',
      },
      {
        key: '3',
        No: 2,
        Name: '指控车2',
        authenticationType: 1,
        authenticationResults: 0,
        time: '/',
        applicationTime: '2023-05-05 12:31:28',
        sendCode: '571F',
        localCode: '678E',
      },
      {
        key: '4',
        No: 2,
        Name: '指控车4',
        authenticationType: 0,
        authenticationResults: 1,
        time: '2023-05-01 16:32:28',
        applicationTime: '2023-05-01 12:30:28',
        sendCode: '571F',
        localCode: '678E',
      },
    ]
    return {
      data,
      queryParam: {},
      reason: '加载不出来',
      columns: [
        {
          title: '序号',
          dataIndex: 'No',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '名称',
          dataIndex: 'Name',
          key: 'Name',
          scopedSlots: { customRender: 'Name' },
        },
        {
          title: '鉴权类型',
          dataIndex: 'authenticationType',
          key: 'authenticationType',
          scopedSlots: { customRender: 'authenticationType' },
        },
        {
          title: '指令申请时间',
          dataIndex: 'applicationTime',
          key: 'applicationTime',
          ellipsis: true,
        },
        {
          title: '鉴权结果',
          dataIndex: 'authenticationResults',
          key: 'authenticationResults',
          ellipsis: true,
          scopedSlots: { customRender: 'authenticationResults' },
        },
        {
          title: '指令响应时间',
          dataIndex: 'time',
          key: 'time',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  // keep-alive 组件激活时调用
  activated() {
    this.data.forEach((i, index) => {
      if (i.authenticationResults == 0) {
        this.$notification['error']({
          message: `指控车${index}鉴权失败`,
          description: (
            <div>
              <p>
                指控车发送的鉴权码：<span>{i.sendCode}</span>
              </p>
              <p>
                地面网关本地存储的鉴权码：<span>{i.localCode}</span>
              </p>
            </div>
          ),
        })
      }
    })
  },
  methods: {
    loadData() { },
    onChange() { },
    handleInfo(record) {
      // console.log(record)
      this.$notification['error']({
        message: `${record.Name}鉴权失败`,
        description: (
          <div>
            <p>
              指控车发送的鉴权码：<span>{record.sendCode}</span>
            </p>
            <p>
              地面网关本地存储的鉴权码：<span>{record.localCode}</span>
            </p>
          </div>
        ),
      })
    },
    fileNameReplace(text) {
      console.log(JSON.stringify(text))
      console.log(JSON.stringify(text).replace(/\\/g, '/'))
      return JSON.stringify(text).replace(/\\/g, '/')
    },
  },
}
</script>

<style lang="less" scoped>
.errorColor {
  color: red;
}
</style>
